<ul class="nav nav-pills" role="tablist">
	<li role="presentation"><a href="#!/">Bridge Devices</a></li>
	<li role="presentation"><a href="#!/system">Bridge Control</a></li>
	<li role="presentation"><a href="#!/logs">Logs</a></li>
	<li ng-if="bridge.showVera" role="presentation"><a href="#!/veradevices">Vera Devices</a></li>
	<li ng-if="bridge.showVera" role="presentation"><a href="#!/verascenes">Vera Scenes</a></li>
	<li ng-if="bridge.showFibaro" role="presentation"><a href="#!/fibarodevices">Fibaro Devices</a></li>
	<li ng-if="bridge.showFibaro" role="presentation"><a href="#!/fibaroscenes">Fibaro Scenes</a></li>
	<li ng-if="bridge.showHarmony" role="presentation"><a href="#!/harmonyactivities">Harmony Activities</a></li>
	<li ng-if="bridge.showHarmony" role="presentation"><a href="#!/harmonydevices">Harmony Devices</a></li>
	<li ng-if="bridge.showNest" role="presentation"><a href="#!/nest">Nest</a></li>
	<li ng-if="bridge.showHue" role="presentation"><a href="#!/huedevices">Hue Devices</a></li>
	<li ng-if="bridge.showHal" role="presentation"><a href="#!/haldevices">HAL Devices</a></li>
	<li ng-if="bridge.showMqtt" role="presentation"><a href="#!/mqttmessages">MQTT Messages</a></li>
	<li ng-if="bridge.showHass" role="presentation"><a href="#!/hassdevices">HomeAssistant Devices</a></li>
	<li ng-if="bridge.showHomeWizard" role="presentation"><a href="#!/homewizarddevices">HomeWizard Devices</a></li>
	<li ng-if="bridge.showDomoticz" role="presentation"><a href="#!/domoticzdevices">Domoticz Devices</a></li>
	<li ng-if="bridge.showSomfy" role="presentation"><a href="#!/somfydevices">Somfy Devices</a></li>
	<li ng-if="bridge.showLifx" role="presentation"><a href="#!/lifxdevices">LIFX Devices</a></li>
	<li ng-if="bridge.showHomeWizard" role="presentation"><a href="#!/homewizarddevices">HomeWizard Devices</a></li>
	<li ng-if="bridge.showOpenHAB" role="presentation"><a href="#!/openhabdevices">OpenHAB Devices</a></li>
	<li ng-if="bridge.showFHEM" role="presentation"><a href="#!/fhemdevices">FHEM Devices</a></li>
	<li ng-if="bridge.showMozIot" role="presentation"><a href="#!/moziotdevices">Mozilla IOT Devices</a></li>
	<li ng-if="bridge.showBroadlink" role="presentation"><a href="#!/broadlinkdevices">Broadlink Devices</a></li>
	<li ng-if="bridge.showHomeGenie" role="presentation"><a href="#!/homegeniedevices">HomeGenie Devices</a></li>
	<li role="presentation" class="active"><a href="#!/editdevice">Add/Edit</a></li>
</ul>

<div class="panel panel-default">
	<div class="panel-heading">
		<h2 class="panel-title">Edit/Copy a device</h2>
	</div>
	<div class="panel-body">
		<p class="text-muted">This screen allows the modification of many
			fields the bridge uses. Please use care when updating these fields as
			you may break the settings used by the bridge to call a specific end
			point device.</p>
		<p class="text-muted">This area allows you to create any http, tcp or
			udp call to an endpoint. You can use the default GET or select the
			http verb type below and configure a payload for either on, dim or
			off methods. For Execution of a
			script or program, please fill in the path. All manually entered calls
			can use Json notation of array with [{&quot;item&quot;:&quot;the
			payload&quot;},{&quot;item&quot;:&quot;another payload&quot;}] to
			execute multiple entries. Adding the value replacements
			(${intensity.byte},${intensity.percent},${intensity.decimal_percent},${intensity.math(X*1)}) will
			also work. Also, you can go back to any helper tab and click a build 
			action button to add another item for a multi-command.</p>
		<p class="text-muted">When copying, update the name and select the "Add Bridge
			Device" Button.</p>

		<form name="form">
			<p>
				<button class="btn btn-primary" ng-click="editDevice(true)">Add
					Bridge Device</button>
				<button type="submit" class="col-xs-4 col-sm-2 btn btn-success"
					ng-click="editDevice(false)">Update Bridge Device</button>
				<button class="btn btn-danger" ng-click="clearDevice()">Clear</button>
				<button class="btn" ng-click="changeEditmode()">Change Edit Mode</button>
			</p>
			<table class="table table-bordered table-striped table-hover">

				<tr>
					<td><label>Name</label></td>

					<td><input type="text" class="form-control" id="device-name"
						ng-model="device.name" placeholder="Device Name"></td>
				</tr>
				<tr>
					<td><label>Description</label></td>

					<td><input type="text" class="form-control" id="device-description"
						ng-model="device.description" placeholder="Device Description"></td>
				</tr>
				<tr>
					<td><label>Comments</label></td>

					<td><input type="text" class="form-control" id="device-comments"
						ng-model="device.comments" placeholder="Device Comments"></td>
				</tr>
				<tr>
					<td><label>Lock Device ID</label></td>
					<td><input type="checkbox"
						ng-model="device.lockDeviceId" ng-true-value=true
						ng-false-value=false> {{device.lockDeviceId}}</td>
				</tr>
				<tr>
					<td><label>Inactive</label></td>
					<td><input type="checkbox"
						ng-model="device.inactive" ng-true-value=true
						ng-false-value=false> {{device.inactive}}</td>
				</tr>
				<tr>
					<td><label>No State (Do not update state for device)</label></td>
					<td><input type="checkbox"
						ng-model="device.noState" ng-true-value=true
						ng-false-value=false> {{device.noState}}</td>
				</tr>
				<tr>
					<td><label>Off State Resets Bri</label></td>
					<td><input type="checkbox"
						ng-model="device.offState" ng-true-value=true
						ng-false-value=false> {{device.offState}}</td>
				</tr>
				<tr>
					<td><label>On when Dim is present (Always uses on with a dim request otherwise it will ignore a given on was well. This is overidden by onFirstDim.)</label></td>
					<td><input type="checkbox"
						ng-model="device.onWhenDimPresent" ng-true-value=true
						ng-false-value=false> {{device.onWhenDimPresent}}</td>
				</tr>
				<tr>
					<td><label>On with First Dim (If the device is not on in the ha-bridge state, it will send on instead of the dim.)</label></td>
					<td><input type="checkbox"
						ng-model="device.onFirstDim" ng-true-value=true
						ng-false-value=false> {{device.onFirstDim}}</td>
				</tr>
				<tr>
					<td><label>Dim only when On present (If dim is present and the on request is present, the on request will not be sent. This is overriden by the above settings.)</label></td>
					<td><input type="checkbox"
						ng-model="device.dimNoOn" ng-true-value=true
						ng-false-value=false> {{device.dimNoOn}}</td>
				</tr>
				<tr>
					<td><label>Send dim when color request present and dim present</label></td>
					<td><input type="checkbox"
						ng-model="device.dimOnColor" ng-true-value=true
						ng-false-value=false> {{device.dimOnColor}}</td>
				</tr>
				<tr>
					<td><label>Filter Address (comma separated list)</label></td>
					<td><input type="text" class="form-control" id="device-requester-addr"
						ng-model="device.requesterAddress" placeholder="Only use if you want to restrict this device to a specific caller(s)"></td>
				</tr>
				<tr>
					<td><label>Target</label></td>

					<td><input type="text" class="form-control" id="device-target"
						ng-model="device.targetDevice" placeholder="default"></td>
				</tr>
				<tr>
					<td><label>Device Type (Informational)</label></td>

					<td><select name="device-type" id="device-type"
						ng-model="device.deviceType">
							<option value="">---Types if needed---</option>
							<!-- not selected / blank option -->
							<option value="custom">Custom</option>
							<option value="UDP">UDP</option>
							<option value="TCP">TCP</option>
							<option value="exec">Execute Script/Program</option>
							<option value="switch">Switch</option>
							<option value="scene">Scene</option>
							<option value="macro">Macro</option>
							<option value="group">Group</option>
							<option value="activity">Activity</option>
							<option value="button">Button</option>
							<option value="thermo">Thermo</option>
							<option value="passthru">Pass Thru</option>
							<option value="home">Home</option>
						</select></td>
				</tr>
				<tr>
					<td><label>Map Type (Legacy)</label></td>

					<td><select
						ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
						ng-model="mapTypeSelected"></select></td>
				</tr>
				<tr>
					<td><label>Unique Id (used for Hue responses)</label></td>

					<td><input type="text" class="form-control"
						id="device-unique-id" ng-model="device.uniqueid"
						placeholder="AA:BB:CC:DD:EE:FF-XX" readonly></td>
				</tr>
				<tr>
					<td><label>Map ID</label></td>

					<td><input type="text" class="form-control" id="device-map-id"
						ng-model="device.mapId" placeholder="1111"></td>
				</tr>
				<tr ng-hide="!showUrls">
					<td><label>OnUrl</label></td>

					<td><textarea class="form-control" id="device-on-url" style="min-height: 250px; min-width: 1300px" 
						ng-model="onUrl" placeholder="default"></textarea></td>
				</tr>
				
				<tr ng-hide="showUrls">
					<td><label>On Items</label></td>

					<td><scrollable-table watch="onDevices">
						<table class="table table-bordered table-striped table-hover">
							<thead>
								<tr>
							<div class="col-xs-12 col-md-4">
									<th>Type</th>
									<th>Target Item</th>
									<th>Delay</th>
									<th>Count</th>
									<th>Filter IPs</th>
									<th>Http Verb</th>
									<th>Http Body</th>
									<th>Http Headers</th>
									<th>Content Type</th>
									<th>Manage</th>
							</div>
								</tr>
							</thead>
							<tr ng-repeat="onItem in onDevices">
							<div class="col-xs-12 col-md-4">
								<td><select
									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]" style="max-width: 150px"
									ng-model="onItem.type"></select></td>
								<td><textarea rows="1" class="form-control"
										id="item-target" ng-model="onItem.item" style="min-width: 600px" placeholder="The Call"></textarea></td>
								<td><textarea rows="1" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-delay" ng-model="onItem.delay" placeholder="millis"></textarea></td>
								<td><textarea rows="1" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-count" ng-model="onItem.count" placeholder="number"></textarea></td>
								<td><textarea rows="1" class="form-control"
										id="item-filterIPs" ng-model="onItem.filterIPs"
										placeholder="restrict IPs"></textarea></td>
								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
									ng-model="onItem.httpVerb">
										<option value="">---</option>
										<!-- not selected / blank option -->
										<option value="GET">GET</option>
										<option value="PUT">PUT</option>
										<option value="POST">POST</option>
								</select></td>
								<td><textarea rows="1" class="form-control"
										id="item-httpBody" ng-model="onItem.httpBody"
										placeholder="body args"></textarea></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-httpHeaders" ng-model="onItem.httpHeaders"
										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
									ng-model="onItem.contentType">
										<option value="">---Please select---</option>
										<!-- not selected / blank option -->
										<option value="application/atom+xml">application/atom+xml</option>
										<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
										<option value="application/json">application/json</option>
										<option value="application/octet-stream">application/octet-stream</option>
										<option value="application/svg+xml">application/svg+xml</option>
										<option value="application/xhtml+xml">application/xhtml+xml</option>
										<option value="application/xml">application/xml</option>
										<option value="*">*</option>
										<option value="multipart/form-data">multipart/form-data</option>
										<option value="text/html">text/html</option>
										<option value="text/plain">text/plain</option>
										<option value="text/xml">text/xml</option>
										<option value="*/*">*/*</option>
								</select></td>
								<td><button class="btn btn-danger" type="submit"
										ng-click="removeItemOn(onItem)">Del</button></td>
							</div>
							</tr>
							<tr>
							<div class="col-xs-12 col-md-4">
								<td><select style="max-width: 150px"
									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
									ng-model="newOnItem.type"></select></td>
								<td><textarea rows="1" cols="20" class="form-control"
										id="item-target" style="min-width: 600px" ng-model="newOnItem.item"
										placeholder="The Call"></textarea></td>
								<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-delay" ng-model="newOnItem.delay"
										placeholder="millis"></textarea></td>
								<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-count" ng-model="newOnItem.count"
										placeholder="number"></textarea></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-filterIPs" ng-model="newOnItem.filterIPs"
										placeholder="restrict IPs"></textarea></td>
								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
									ng-model="newOnItem.httpVerb">
										<option value="">---</option>
										<!-- not selected / blank option -->
										<option value="GET">GET</option>
										<option value="PUT">PUT</option>
										<option value="POST">POST</option>
								</select></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-httpBody" ng-model="newOnItem.httpBody"
										placeholder="body args"></textarea></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-httpHeaders" ng-model="newOnItem.httpHeaders"
										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
									ng-model="newOnItem.contentType">
										<option value="">---Please select---</option>
										<!-- not selected / blank option -->
										<option value="application/atom+xml">application/atom+xml</option>
										<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
										<option value="application/json">application/json</option>
										<option value="application/octet-stream">application/octet-stream</option>
										<option value="application/svg+xml">application/svg+xml</option>
										<option value="application/xhtml+xml">application/xhtml+xml</option>
										<option value="application/xml">application/xml</option>
										<option value="*">*</option>
										<option value="multipart/form-data">multipart/form-data</option>
										<option value="text/html">text/html</option>
										<option value="text/plain">text/plain</option>
										<option value="text/xml">text/xml</option>
										<option value="*/*">*/*</option>
								</select></td>
								<td><button class="btn btn-success" type="submit"
										ng-click="addItemOn(newOnItem)">Add</button></td>
							</div>
							</tr>
						</table>
						</scrollable-table></td>
				</tr>
				<tr ng-hide="!showUrls">
					<td><label>DimUrl</label></td>

					<td><textarea class="form-control" id="device-dim-url" style="min-height: 250px; min-width: 1300px"
						ng-model="dimUrl" placeholder="default"></textarea></td>
				</tr>
				
				<tr ng-hide="showUrls">
					<td><label>Dim Items</label></td>

					<td><scrollable-table watch="dimDevices">
						<table class="table table-bordered table-striped table-hover">
							<thead>
								<tr>
							<div class="col-xs-12 col-md-4">
									<th>Type</th>
									<th>Target Item</th>
									<th>Delay</th>
									<th>Count</th>
									<th>Filter IPs</th>
									<th>Http Verb</th>
									<th>Http Body</th>
									<th>Http Headers</th>
									<th>Content Type</th>
									<th>Manage</th>
							</div>
								</tr>
							</thead>
							<tr ng-repeat="dimItem in dimDevices">
							<div class="col-xs-12 col-md-4">
								<td><select style="max-width: 150px"
									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
									ng-model="dimItem.type"></select></td>
								<td><textarea rows="1" cols="20" class="form-control"
										id="item-target" ng-model="dimItem.item" style="min-width: 600px"
										placeholder="The Call"></textarea></td>
								<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-delay" ng-model="dimItem.delay" placeholder="millis"></textarea></td>
								<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-count" ng-model="dimItem.count" placeholder="number"></textarea></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-filterIPs" ng-model="dimItem.filterIPs"
										placeholder="restrict IPs"></textarea></td>
								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
									ng-model="dimItem.httpVerb">
										<option value="">---</option>
										<!-- not selected / blank option -->
										<option value="GET">GET</option>
										<option value="PUT">PUT</option>
										<option value="POST">POST</option>
								</select></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-httpBody" ng-model="dimItem.httpBody"
										placeholder="body args"></textarea></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-httpHeaders" ng-model="dimItem.httpHeaders"
										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
									ng-model="dimItem.contentType">
										<option value="">---Please select---</option>
										<!-- not selected / blank option -->
										<option value="application/atom+xml">application/atom+xml</option>
										<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
										<option value="application/json">application/json</option>
										<option value="application/octet-stream">application/octet-stream</option>
										<option value="application/svg+xml">application/svg+xml</option>
										<option value="application/xhtml+xml">application/xhtml+xml</option>
										<option value="application/xml">application/xml</option>
										<option value="*">*</option>
										<option value="multipart/form-data">multipart/form-data</option>
										<option value="text/html">text/html</option>
										<option value="text/plain">text/plain</option>
										<option value="text/xml">text/xml</option>
										<option value="*/*">*/*</option>
								</select></td>
								<td><button class="btn btn-danger" type="submit"
										ng-click="removeItemDim(dimItem)">Del</button></td>
							</div>
							</tr>
							<tr>
							<div class="col-xs-12 col-md-4">
								<td><select style="max-width: 150px"
									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
									ng-model="newDimItem.type"></select></td>
								<td><textarea rows="1" cols="20" class="form-control"
										id="item-target" ng-model="newDimItem.item" style="min-width: 600px"
										placeholder="The Call"></textarea></td>
								<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-delay" ng-model="newDimItem.delay"
										placeholder="millis"></textarea></td>
								<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-count" ng-model="newDimItem.count"
										placeholder="number"></textarea></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-filterIPs" ng-model="newDimItem.filterIPs"
										placeholder="restrict IPs"></textarea></td> 
								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
									ng-model="newDimItem.httpVerb">
										<option value="">---</option>
										<!-- not selected / blank option -->
										<option value="GET">GET</option>
										<option value="PUT">PUT</option>
										<option value="POST">POST</option>
								</select></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-httpBody" ng-model="newDimItem.httpBody"
										placeholder="body args"></textarea></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-httpHeaders" ng-model="newDimItem.httpHeaders"
										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
									ng-model="newDimItem.contentType">
										<option value="">---Please select---</option>
										<!-- not selected / blank option -->
										<option value="application/atom+xml">application/atom+xml</option>
										<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
										<option value="application/json">application/json</option>
										<option value="application/octet-stream">application/octet-stream</option>
										<option value="application/svg+xml">application/svg+xml</option>
										<option value="application/xhtml+xml">application/xhtml+xml</option>
										<option value="application/xml">application/xml</option>
										<option value="*">*</option>
										<option value="multipart/form-data">multipart/form-data</option>
										<option value="text/html">text/html</option>
										<option value="text/plain">text/plain</option>
										<option value="text/xml">text/xml</option>
										<option value="*/*">*/*</option>
								</select></td>
								<td><button class="btn btn-success" type="submit"
										ng-click="addItemDim(newDimItem)">Add</button></td>
							</div>
							</tr>
						</table>
						</scrollable-table></td>
				</tr>
				<tr ng-hide="!showUrls">
					<td><label>OffUrl</label></td>

					<td><textarea class="form-control" id="device-off-url" style="min-height: 250px; min-width: 1300px"
						ng-model="offUrl" placeholder="default"></textarea></td>
				</tr>
				
				<tr ng-hide="showUrls">
					<td><label>Off Items</label></td>

					<td><scrollable-table watch="offDevices">
						<table class="table table-bordered table-striped table-hover">
							<thead>
								<tr>
							<div class="col-xs-12 col-md-4">
									<th>Type</th>
									<th>Target Item</th>
									<th>Delay</th>
									<th>Count</th>
									<th>Filter IPs</th>
									<th>Http Verb</th>
									<th>Http Body</th>
									<th>Http Headers</th>
									<th>Content Type</th>
									<th>Manage</th>
							</div>
								</tr>
							</thead>
							<tr ng-repeat="offItem in offDevices">
							<div class="col-xs-12 col-md-4">
								<td><select style="max-width: 150px"
									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
									ng-model="offItem.type"></select></td>
								<td><textarea rows="1" cols="20" class="form-control"
										id="item-target" ng-model="offItem.item" style="min-width: 600px"
										placeholder="The Call"></textarea></td>
								<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-delay" ng-model="offItem.delay" placeholder="millis"></textarea></td>
								<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-count" ng-model="offItem.count" placeholder="number"></textarea></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-filterIPs" ng-model="offItem.filterIPs"
										placeholder="restrict IPs"></textarea></td>
								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
									ng-model="offItem.httpVerb">
										<option value="">---</option>
										<!-- not selected / blank option -->
										<option value="GET">GET</option>
										<option value="PUT">PUT</option>
										<option value="POST">POST</option>
								</select></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-httpBody" ng-model="offItem.httpBody"
										placeholder="body args"></textarea></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-httpHeaders" ng-model="offItem.httpHeaders"
										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
									ng-model="offItem.contentType">
										<option value="">---Please select---</option>
										<!-- not selected / blank option -->
										<option value="application/atom+xml">application/atom+xml</option>
										<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
										<option value="application/json">application/json</option>
										<option value="application/octet-stream">application/octet-stream</option>
										<option value="application/svg+xml">application/svg+xml</option>
										<option value="application/xhtml+xml">application/xhtml+xml</option>
										<option value="application/xml">application/xml</option>
										<option value="*">*</option>
										<option value="multipart/form-data">multipart/form-data</option>
										<option value="text/html">text/html</option>
										<option value="text/plain">text/plain</option>
										<option value="text/xml">text/xml</option>
										<option value="*/*">*/*</option>
								</select></td>
								<td><button class="btn btn-danger" type="submit"
										ng-click="removeItemOff(offItem)">Del</button></td>
							</div>
							</tr>
							<tr>
							<div class="col-xs-12 col-md-4">
								<td><select style="max-width: 150px"
									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
									ng-model="newOffItem.type"></select></td>
								<td><textarea rows="1" cols="20" class="form-control"
										id="item-target" ng-model="newOffItem.item" style="min-width: 600px"
										placeholder="The Call"></textarea></td>
								<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-delay" ng-model="newOffItem.delay"
										placeholder="millis"></textarea></td>
								<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-count" ng-model="newOffItem.count"
										placeholder="number"></textarea></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-filterIPs" ng-model="newOffItem.filterIPs"
										placeholder="restrict IPs"></textarea></td>
								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
									ng-model="newOffItem.httpVerb">
										<option value="">---</option>
										<!-- not selected / blank option -->
										<option value="GET">GET</option>
										<option value="PUT">PUT</option>
										<option value="POST">POST</option>
								</select></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-httpBody" ng-model="newOffItem.httpBody"
										placeholder="body args"></textarea></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-httpHeaders" ng-model="newOffItem.httpHeaders"
										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
									ng-model="newOffItem.contentType">
										<option value="">---Please select---</option>
										<!-- not selected / blank option -->
										<option value="application/atom+xml">application/atom+xml</option>
										<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
										<option value="application/json">application/json</option>
										<option value="application/octet-stream">application/octet-stream</option>
										<option value="application/svg+xml">application/svg+xml</option>
										<option value="application/xhtml+xml">application/xhtml+xml</option>
										<option value="application/xml">application/xml</option>
										<option value="*">*</option>
										<option value="multipart/form-data">multipart/form-data</option>
										<option value="text/html">text/html</option>
										<option value="text/plain">text/plain</option>
										<option value="text/xml">text/xml</option>
										<option value="*/*">*/*</option>
								</select></td>
								<td><button class="btn btn-success" type="submit"
										ng-click="addItemOff(newOffItem)">Add</button></td>
							</div>
							</tr>
						</table>
						</scrollable-table></td>
				</tr>
				<tr ng-hide="!showUrls">
					<td><label>ColorUrl</label></td>

					<td><textarea class="form-control" id="device-color-url" style="min-height: 250px; min-width: 1300px"
						ng-model="colorUrl" placeholder="default"></textarea></td>
				</tr>
				<tr ng-hide="showUrls">
					<td><label>Color Items</label></td>

					<td><scrollable-table watch="colorDevices">
						<table class="table table-bordered table-striped table-hover">
							<thead>
								<tr>
							<div class="col-xs-12 col-md-4">
									<th>Type</th>
									<th>Target Item</th>
									<th>Delay</th>
									<th>Count</th>
									<th>Filter IPs</th>
									<th>Http Verb</th>
									<th>Http Body</th>
									<th>Http Headers</th>
									<th>Content Type</th>
									<th>Manage</th>
							</div>
								</tr>
							</thead>
							<tr ng-repeat="colorItem in colorDevices">
							<div class="col-xs-12 col-md-4">
								<td><select style="max-width: 150px"
									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
									ng-model="colorItem.type"></select></td>
								<td><textarea rows="1" cols="20" class="form-control"
										id="item-target" ng-model="colorItem.item" style="min-width: 600px"
										placeholder="The Call"></textarea></td>
								<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-delay" ng-model="colorItem.delay" placeholder="millis"></textarea></td>
								<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-count" ng-model="colorItem.count" placeholder="number"></textarea></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-filterIPs" ng-model="colorItem.filterIPs"
										placeholder="restrict IPs"></textarea></td>
								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
									ng-model="colorItem.httpVerb">
										<option value="">---</option>
										<!-- not selected / blank option -->
										<option value="GET">GET</option>
										<option value="PUT">PUT</option>
										<option value="POST">POST</option>
								</select></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-httpBody" ng-model="colorItem.httpBody"
										placeholder="body args"></textarea></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-httpHeaders" ng-model="colorItem.httpHeaders"
										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
									ng-model="colorItem.contentType">
										<option value="">---Please select---</option>
										<!-- not selected / blank option -->
										<option value="application/atom+xml">application/atom+xml</option>
										<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
										<option value="application/json">application/json</option>
										<option value="application/octet-stream">application/octet-stream</option>
										<option value="application/svg+xml">application/svg+xml</option>
										<option value="application/xhtml+xml">application/xhtml+xml</option>
										<option value="application/xml">application/xml</option>
										<option value="*">*</option>
										<option value="multipart/form-data">multipart/form-data</option>
										<option value="text/html">text/html</option>
										<option value="text/plain">text/plain</option>
										<option value="text/xml">text/xml</option>
										<option value="*/*">*/*</option>
								</select></td>
								<td><button class="btn btn-danger" type="submit"
										ng-click="removeItemColor(colorItem)">Del</button></td>
							</div>
							</tr>
							<tr>
							<div class="col-xs-12 col-md-4">
								<td><select style="max-width: 150px"
									ng-options="mapType as mapType[1] for mapType in bridge.mapTypes track by mapType[0]"
									ng-model="newColorItem.type"></select></td>
								<td><textarea rows="1" cols="20" class="form-control"
										id="item-target" ng-model="newColorItem.item" style="min-width: 600px"
										placeholder="The Call"></textarea></td>
								<td><textarea rows="1" cols="4" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-delay" ng-model="newColorItem.delay"
										placeholder="millis"></textarea></td>
								<td><textarea rows="1" cols="2" class="form-control" style="max-width: 80px; min-width: 80px"
										id="item-count" ng-model="newColorItem.count"
										placeholder="number"></textarea></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-filterIPs" ng-model="newColorItem.filterIPs"
										placeholder="restrict IPs"></textarea></td>
								<td><select name="item-http-verb" id="item-http-verb" style="max-width: 80px"
									ng-model="newColorItem.httpVerb">
										<option value="">---</option>
										<!-- not selected / blank option -->
										<option value="GET">GET</option>
										<option value="PUT">PUT</option>
										<option value="POST">POST</option>
								</select></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-httpBody" ng-model="newColorItem.httpBody"
										placeholder="body args"></textarea></td>
								<td><textarea rows="1" cols="16" class="form-control"
										id="item-httpHeaders" ng-model="newColorItem.httpHeaders"
										placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea></td>
								<td><select name="item-content-type" id="item-content-type" style="max-width: 160px"
									ng-model="newColorItem.contentType">
										<option value="">---Please select---</option>
										<!-- not selected / blank option -->
										<option value="application/atom+xml">application/atom+xml</option>
										<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
										<option value="application/json">application/json</option>
										<option value="application/octet-stream">application/octet-stream</option>
										<option value="application/svg+xml">application/svg+xml</option>
										<option value="application/xhtml+xml">application/xhtml+xml</option>
										<option value="application/xml">application/xml</option>
										<option value="*">*</option>
										<option value="multipart/form-data">multipart/form-data</option>
										<option value="text/html">text/html</option>
										<option value="text/plain">text/plain</option>
										<option value="text/xml">text/xml</option>
										<option value="*/*">*/*</option>
								</select></td>
								<td><button class="btn btn-success" type="submit"
										ng-click="addItemColor(newColorItem)">Add</button></td>
							</div>
							</tr>
						</table>
						</scrollable-table></td>
				</tr>
				<tr>
					<td><label>Legacy Fields <a ng-click="toggleButtons()"><span class={{imgButtonsUrl}} aria-hidden="true"></span></a></label>
					</td>
					<td>
					</td>
				</tr>
				<tr ng-if="buttonsVisible">
					<td><label>HTTP Headers</label></td>

					<td><textarea rows="3" class="form-control"
							id="device-headers" ng-model="device.headers"
							placeholder="format like: [{&quot;name&quot;:&quot;A name&quot;,&quot;value&quot;:&quot;a value&quot;}]"></textarea>
					</td>
				</tr>
				<tr ng-if="buttonsVisible">
					<td><label>Http Verb</label></td>

					<td><select name="device-http-verb" id="device-http-verb"
						ng-model="device.httpVerb">
							<option value="">---Please select---</option>
							<!-- not selected / blank option -->
							<option value="GET">GET</option>
							<option value="PUT">PUT</option>
							<option value="POST">POST</option>
					</select></td>
				</tr>
				<tr ng-if="buttonsVisible">
					<td><label>Content Type</label></td>

					<td><select name="device-content-type"
						id="device-content-type" ng-model="device.contentType">
							<option value="">---Please select---</option>
							<!-- not selected / blank option -->
							<option value="application/atom+xml">application/atom+xml</option>
							<option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
							<option value="application/json">application/json</option>
							<option value="application/octet-stream">application/octet-stream</option>
							<option value="application/svg+xml">application/svg+xml</option>
							<option value="application/xhtml+xml">application/xhtml+xml</option>
							<option value="application/xml">application/xml</option>
							<option value="*">*</option>
							<option value="multipart/form-data">multipart/form-data</option>
							<option value="text/html">text/html</option>
							<option value="text/plain">text/plain</option>
							<option value="text/xml">text/xml</option>
							<option value="*/*">*/*</option>
					</select></td>
				</tr>
				<tr ng-if="buttonsVisible">
					<td><label>Content Body On</label></td>

					<td><textarea rows="3" class="form-control"
							id="device-content-body" ng-model="device.contentBody"
							placeholder="Content Body On for specific GET/PUT/POST type"></textarea>
					</td>
				</tr>
				<tr ng-if="buttonsVisible">
					<td><label>Content Body Dim</label></td>

					<td><textarea rows="3" class="form-control"
							id="device-content-body-dim" ng-model="device.contentBodyDim"
							placeholder="Content Body Dim for specific GET/PUT/POST type"></textarea>
					</td>
				</tr>
				<tr ng-if="buttonsVisible">
					<td><label>Content Body Off</label></td>

					<td><textarea rows="3" class="form-control"
							id="device-content-body-off" ng-model="device.contentBodyOff"
							placeholder="Content Body Off for specific GET/PUT/POST type"></textarea>
					</td>
				</tr>
			</table>
		</form>
	</div>
</div>